<script setup lang="ts">
import type { PrizeVO } from '@/types/vo/PrizeVO'
import type PrizeModal from "@/views/Prize/components/PrizeModal.vue";

const { prize } = defineProps<{
  prize: PrizeVO
}>()

const modalRef = ref<InstanceType<typeof PrizeModal>>()

const handlePositiveClick = (prize: PrizeVO) => {
  modalRef.value?.open(prize)
}
</script>

<template>
  <div class="prize-item">
    <!-- 商品图片区域 -->
    <div class="prize-img-container">
      <div class="points-tag">{{ prize.prizePoints }} 积分</div>
      <n-image
        :src="prize.prizeImage"
        class="prize-img"
        object-fit="contain"
        preview-disabled
        :fallback-src="'https://img.alicdn.com/imgextra/i1/O1CN01NMnZ7Q1Dcj4QfgQQM_!!6000000000236-2-tps-200-200.png'"
      />
    </div>

    <!-- 商品信息区域 -->
    <div class="prize-info">
      <div class="prize-name">{{ prize.prizeName }}</div>

      <!-- 兑换按钮 -->
      <div class="prize-action mx-20px mb-10px rounded">
        <n-popconfirm
          @positive-click="() => handlePositiveClick(prize)"
          v-if="prize.prizeStock > 0"
          placement="top"
        >
          <template #trigger>
            <n-button
              class="exchange-btn"
              :disabled="prize.prizeStock <= 0"
              size="small"
              text
            >
              <Icon icon="ant-design:shopping-cart-outlined" class="btn-icon" />
              立即兑换
            </n-button>
          </template>
          <div class="confirm-content">
            <p>确定要兑换该商品吗？</p>
            <p class="confirm-points">将消耗 {{ prize.prizePoints }} 积分</p>
          </div>
        </n-popconfirm>

        <n-popover trigger="hover" v-else placement="top">
          <template #trigger>
            <div class="out-of-stock">
              <Icon icon="ant-design:exclamation-circle-outlined" class="stock-icon" />
              库存不足
            </div>
          </template>
          <span>暂无库存，无法兑换</span>
        </n-popover>
      </div>
    </div>
  </div>
  <PrizeModal ref="modalRef" />
</template>

<style scoped>
.prize-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.prize-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #e6f7ff;
}

.prize-img-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1 宽高比 */
  background-color: #fafafa;
  overflow: hidden;
}

.points-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  z-index: 1;
}

.prize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform 0.3s;
}

.prize-item:hover .prize-img {
  transform: scale(1.05);
}

.prize-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.prize-name {
  font-size: 14px;
  color: #262626;
  margin-bottom: 16px;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prize-action {
  margin-top: auto;
  text-align: center;
}

.exchange-btn {
  width: 100%;
  color: #389e0d;
  font-size: 14px;
  transition: all 0.2s;
  border-top: 1px solid #f0f0f0;
  border-radius: 0;
  height: 40px;
  margin: 0 -16px -16px;
  width: calc(100% + 32px);
}

.btn-icon {
  margin-right: 4px;
}

.exchange-btn:hover {
  color: #52c41a;
  background-color: #ddf1e6;
  border-radius: 10px;
}

.out-of-stock {
  width: calc(100% + 32px);
  margin: 0 -16px -16px;
  text-align: center;
  padding: 10px 0;
  background-color: #f5f5f5;
  color: #bfbfbf;
  font-size: 14px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.stock-icon {
  margin-right: 4px;
}

.confirm-content {
  padding: 12px;
  text-align: center;
}

.confirm-points {
  color: #ff7875;
  font-weight: 500;
  margin-top: 4px;
}
</style>
